<template>
  <div class="job-main">
    <div class="job-main-center">
        <div class="job-main-center-title">
            发布职位
        </div>
        <div class="job-main-center-info">
            完整的职位信息, 有助于为你匹配精准的人才
        </div>
        <div class="job-main-center-info-job-title">职位名称</div>
        <el-input class="job-main-center-input" v-model="formData.job_title" placeholder="请填写职位名称"></el-input>
        <div class="job-main-center-info-job-title">职位类别</div>
        <div class="job-main-center-input">
            <el-autocomplete
                v-model="formData.job_type"
                :fetch-suggestions="querySearch"
                placeholder="请填写职位类别"
                @select="handleSelect"
                width="100"
            ></el-autocomplete>
        </div>
        <div>
            <div class="job-main-center-info-job-title">
                经验要求
            </div>
            <el-select v-model="formData.ex_value" placeholder="请选择" class="job-main-center-input">
                <el-option
                v-for="item in formData.ex_options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div>
            <div class="job-main-center-info-job-title">
                最低学历
            </div>
            <el-select v-model="formData.bg_value" placeholder="请选择" class="job-main-center-input">
                <el-option
                v-for="item in formData.bg_options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div>
            <div class="job-main-center-info-job-title">
                薪资范围(千)
            </div>
            <el-input placeholder="最低薪资" style="width: 100px;" class="job-main-center-input" v-model="formData.min_money" />
            <el-input placeholder="最高薪资" style="width: 100px;" class="job-main-center-input" v-model="formData.max_money" />
        </div>
        <div>
            <div class="job-main-center-info-job-title">
                职位描述
            </div>
            <el-input class="job-main-center-input" v-model="formData.job_desc" placeholder="请填写职位描述" />
        </div>
        <div>
            <div class="job-main-center-info-job-title">
                工作地址
            </div>
            <el-input class="job-main-center-input" v-model="formData.job_address" placeholder="请填写工作地址" />
        </div>
    <button class="job-main-center-button" @click="this.submit()">发布</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            formData:{
                job_type: '',
                job_title: '',
                ex_options: [{
                    value: '1',
                    label: '不限'
                    }, {
                    value: '2',
                    label: '1-3年'
                    }, {
                    value: '3',
                    label: '5-10年'
                    }, {
                    value: '4',
                    label: '10-20年'
                    }, {
                    value: '5',
                    label: '20年以上'
                    }, 
                    ],
                ex_value: '1',
                bg_options: [{
                    value: '1',
                    label: '学历不限'
                },{
                    value: '2',
                    label: '初中或以下'
                },{
                    value: '3',
                    label: '高中/中专'
                },{
                    value: '4',
                    label: '专科'
                },{
                    value: '5',
                    label: '本科'
                },{
                    value: '6',
                    label: '硕士'
                },{
                    value: '7',
                    label: '博士'
                },
                ],
                bg_value: '1',
                min_money: 0,
                max_money: 0,
                job_desc: '',
                job_address: ''
            },
            restaurants: [{ "value": "Java后端" }],
        }
    },
    methods:{
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        submit(){
            let jobTypeIsNull = this.formData.job_type == null || this.formData.job_type === "";
            let jobTitleIsNull = this.formData.job_title == null || this.formData.job_title === "";
            let exOptionsIsNull = this.formData.ex_options == null || this.formData.ex_options === "";
            let exValueIsNull = this.formData.ex_value == null || this.formData.ex_value == "";
            let bgOptionsIsNull = this.formData.bg_options == null || this.formData.bg_options === "";
            let minMontyIsNull = this.formData.min_money == null || this.formData.min_money === "";
            let maxMoney = this.formData.max_money == null || this.formData.max_money === "";
            let jobDescIsNull = this.formData.job_desc == null || this.formData.job_desc === "";
            let jobAddressIsNull = this.formData.job_address == null || this.formData.job_address === "";

            if(jobTypeIsNull || jobTitleIsNull || exOptionsIsNull || exValueIsNull ||
                bgOptionsIsNull || minMontyIsNull || maxMoney || jobDescIsNull || jobAddressIsNull){
                this.$notify.error("信息非法，招聘信息不能为空");
            }else{
                if ((typeof(this.formData.min_money) === 'number' && typeof(this.formData.max_money) === 'number')) {
                    this.$notify.error("金额必须为数字");
                }else if(this.formData.min_money <= 0 || this.formData.max_money <= 0){
                    this.$notify.error("金额必须大于0");
                }
                if(this.formData.job_desc.length <= 5){
                    this.$notify.error("招聘详细信息字数必须大于5");
                }
            }
            
            console.log("aaa");
        }
    },
    mounted(){
    }
}
</script>

<style lang="scss" scoped>
.job-main{
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    .job-main-center{
        background-color: white;
        min-height: 600px;
        width: 30%;
        padding-bottom: 30px;
        border-radius: 10px;
        .job-main-center-title{
            font-size: 26px;
            font-weight: 900;
            color: rgb(80, 80, 80);
            padding-left: 40px;
            padding-top: 40px;
        }
        .job-main-center-input{
            width: 250px;
            margin-left: 40px;
            margin-top: 10px;
        }
    }
}
.job-main-center-info{
    color: rgb(116, 116, 116);
    font-size: 16px;
    padding-left: 40px;
    padding-top: 10px;
}
.job-main-center-info-job-title{
    padding-left: 40px;
    padding-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: rgb(116, 116, 116);
}
.job-main-center-button{
    margin-left: 40px;
    margin-top: 20px;
    width: 250px;
    height: 50px;
    border: none;
    background: rgb(0, 89, 255);
    border-radius: 50px;
    font-size: 18px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.job-main-center-button:hover{
    background: rgb(17, 86, 214);
    transition: background-color 0.2s ease;
}
</style>